//获取应用实例
const app = getApp();

Page({
  data: {
    path: '',
    typeCode: '',
    currentTab: '',
    currentTabimg: '',
    isColours: true,
    type: '',
    ids: 10,
    julione: 0, //两指头第一次放上去的距离
    julitow: '', //两指头第二次放上去的距离
    kuangw: '', //截取框宽
    kuangh: '', //截取框高
    widimg: '', //弹出框图片高度
    heimg: '', //弹出框图片宽度
    toimg: 0, //弹出框图片top
    leimg: 0, //弹出框图片left
    toimgs: 0, //弹出框图片top
    leimgs: 0, //弹出框图片left
    imgsf: '', //图片缩放比例
    phoboxW: '', //框宽
    phoboxH: '', //框高
    propic: '',
    widthimg: '',
    heightimg: '',
    pic: [],
    id: '',
    showModal: false,
    imgboxSW: '',
    imgboxSH: '',
    imgboxST: '',
    imgboxSL: '',
    img1W: '', //截取图片1宽度
    img1H: '', //截取图片1高度
    imgbl: '', //图片1到屏幕缩放比例
    imgbt: '', //图片2到屏幕缩放比例
    img1T: '',
    img1B: '',
    img1L: '',
    img2W: '', //截取图片2宽度
    img2H: '', //截取图片2宽度
    img2R: '',
    img2B: '',
    img2T: '',
    img2L: '',
    img1R: '',
    towselt: '',//选择二拼拼接id
    img3W: '', //截取图片1宽度
    img3H: '', //截取图片1高度
    img3T: '',
    img3L: '',
    imgct: '', //图片1到屏幕缩放比例
    img4W: '', //截取图片4宽度
    img4H: '', //截取图片4高度
    img4T: '',
    img4L: '',
    imgdt: '',
    HW: 1,//框高/宽
    Scale: 1, //元素缩放比例
    originUrl: '',
    cropperResult: '',
    ratio: 1,
    // 二拼
    towpin: [{
      T: '0',
      L: '0',
      W: '525',
      H: '360',
      pictrs: ''
    },
    {
      T: '52%',
      L: '0',
      W: '525',
      H: '360',
      pictrs: ''
    },
    {
      T: '0',
      L: '0',
      W: '290',
      H: '740'
    },
    {
      T: '0',
      L: '60%',
      W: '205',
      H: '740'
    },
    ],
    // 组件所需的参数
    nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '图片拼接', //导航栏 中间的标题
    },
    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20,
  },
  onLoad(options) {
    let typeCode = options.id;
    let that = this;
    that.setData({
      typeCode: typeCode
    })
  },

  // 添加图片
  addimga(e) {
    console.log(e)
    let that = this;
    let pic = that.data.pic;
    let id = e.currentTarget.id;
    let W = that.data.towpin[id].W;
    let H = that.data.towpin[id].H;
    that.setData({
      id: id,
      kuangw: W,
      kuangh: H,
      ratio: H / W,
      HW: H / W,
      showModal: true
    })
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        that.setData({
          originUrl: res.tempFilePaths[0],
          cropperResult: '',
          isShow: false,
        })
      }
    })
  },
  getCropperImg(e) {
    let that = this;
    console.log(e)
    let id = that.data.id;
    that.setData({
      originUrl: '',
      showModal: false,
      ['towpin[' + id + '].pictrs']: e.detail.url,
    })
    wx.createSelectorQuery().select('.swiper_contentboximg').boundingClientRect(function (imgboxS) {
      console.log('框：', imgboxS)
      let imgboxSW = imgboxS.width; //截取框宽度
      let imgboxSH = imgboxS.height; //截取框高度
      let imgboxST = imgboxS.top; //截取框高度
      let imgboxSL = imgboxS.left; //截取框高度

      that.setData({
        imgboxST: imgboxST,
        imgboxSL: imgboxSL,
        imgboxSW: imgboxSW,
        imgboxSH: imgboxSH,
        Scale: 1
      })
    }).exec()
    if (id == 0) {
      // 获取图片1的坐标与长宽
      wx.getImageInfo({
        src: that.data.towpin[0].pictrs,
        success: function (res) {
          wx.createSelectorQuery().select('.id1img').boundingClientRect(function (img1) {
            console.log(img1)
            console.log("第一张图片左:", img1.left, "第一张图片上:", img1.top)
            let img1W = img1.width; //截取图片宽度
            let img1H = img1.height; //截取图片高度
            let imgbl = res.width / img1.width; //图片到屏幕缩放比例
            let img1T = img1.top;
            let img1R = img1.right;
            let img1B = img1.bottom;
            let img1L = img1.left;
            that.setData({
              img1W: img1W,
              img1H: img1H,
              imgbl: imgbl,
              img1T: img1T,
              img1L: img1L + that.data.currentTabimg * that.data.imgboxSW,
              img1B: img1B,
              img1R: img1R
            })
          }).exec()
        }
      })
    } else if (id == 1) {
      // 获取图片2的坐标与长宽
      wx.getImageInfo({
        src: that.data.towpin[1].pictrs,
        success: function (res) {
          wx.createSelectorQuery().select('.id2img').boundingClientRect(function (img2) {
            console.log("第二张图片左:", img2.left, "第二张图片上:", img2.top)

            let img2W = img2.width; //截取图片宽度
            let img2H = img2.height; //截取图片高度
            let imgbt = res.width / img2.width; //图片到屏幕缩放比例
            let img2T = img2.top;
            let img2L = img2.left;

            that.setData({
              img2W: img2W,
              img2H: img2H,
              img2T: img2T,
              img2L: img2L + that.data.currentTabimg * that.data.imgboxSW,
              imgbt: imgbt,

            })
          }).exec()
        }
      })
    } else if (id == 2) {
      // 获取图片2的坐标与长宽
      wx.getImageInfo({
        src: that.data.towpin[2].pictrs,
        success: function (res) {
          wx.createSelectorQuery().select('.id3img').boundingClientRect(function (img3) {
            console.log("第三张图片左:", img3.left, "第三张图片上:", img3.top)

            let img3W = img3.width; //截取图片宽度
            let img3H = img3.height; //截取图片高度
            let imgct = res.width / img3.width; //图片到屏幕缩放比例
            let img3T = img3.top;
            let img3L = img3.left;
            that.setData({
              img3W: img3W,
              img3H: img3H,
              img3T: img3T,
              img3L: img3L + (that.data.currentTabimg - 4) * that.data.imgboxSW,
              imgct: imgct,
            })
            console.log(that.data.img3L, img3.left, that.data.currentTabimg)
          }).exec()

        }
      })
    } else if (id == 3) {
      // 获取图片2的坐标与长宽
      wx.getImageInfo({
        src: that.data.towpin[3].pictrs,
        success: function (res) {
          wx.createSelectorQuery().select('.id4img').boundingClientRect(function (img4) {
            console.log("第四张图片左:", img4.left, "第四张图片上:", img4.top, (that.data.currentTabimg - 9) * that.data.imgboxSW)

            let img4W = img4.width; //截取图片宽度
            let img4H = img4.height; //截取图片高度
            let imgdt = res.width / img4.width; //图片到屏幕缩放比例
            let img4T = img4.top;
            let img4L = img4.left;
            that.setData({
              img4W: img4W,
              img4H: img4H,
              img4T: img4T,
              img4L: img4L + (that.data.currentTabimg - 8) * that.data.imgboxSW,
              imgdt: imgdt,
            })
            console.log(that.data.img4L, img4.left, that.data.currentTabimg)
          }).exec()

        }
      })
    }
  },
  //点击切换
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.currentTarget.dataset.current
      })
    }
  },
  //点击切换
  imgclickTab: function (e) {
    var that = this;
    console.log(e)
    let towselt = e.currentTarget.dataset.current;
    that.setData({
      towselt: towselt
    })
    if (this.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTabimg: e.currentTarget.dataset.current
      })
      if (e.currentTarget.dataset.current == 0) {
        let towpin = [{
          T: '0',
          L: '0',
          W: '525',
          H: '360',
          pictrs: ''
        },
        {
          T: '52%',
          L: '0',
          W: '525',
          H: '360',
          pictrs: ''
        }];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 1) {
        let towpin = [{
          T: '0',
          L: '0',
          W: '290',
          H: '740'
        },
        {
          T: '0',
          L: '60%',
          W: '205',
          H: '740'
        }]
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 2) {
        let towpin = [{
          T: '0',
          L: '0',
          W: '525',
          H: '300',
          pictrs: ''
        },
        {
          T: '43%',
          L: '0',
          W: '525',
          H: '420',
          pictrs: ''
        }];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 3) {
        let towpin = [{
          T: '0',
          L: '0',
          W: '525',
          H: '500',
          pictrs: ''
        },
        {
          T: '72%',
          L: '0',
          W: '525',
          H: '220',
          pictrs: ''
        }];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 4) {
        let towpin = [
          { T: '0', L: '0', W: '525', H: '200', pictrs: '' },
          { T: '30%', L: '0', W: '525', H: '230', pictrs: '' },
          { T: '64%', L: '0', W: '525', H: '280', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 5) {
        let towpin = [
          { T: '0%', L: '0', W: '525', H: '260', pictrs: '' },
          { T: '40%', L: '0%', W: '240', H: '400', pictrs: '' },
          { T: '40%', L: '50%', W: '240', H: '400', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 6) {
        let towpin = [
          { T: '0%', L: '0%', W: '160', H: '740', pictrs: '' },
          { T: '0%', L: '33%', W: '160', H: '740', pictrs: '' },
          { T: '0%', L: '66%', W: '160', H: '740', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 7) {
        let towpin = [
          { T: '10%', L: '0', W: '240', H: '600', pictrs: '' },
          { T: '10%', L: '50%', W: '240', H: '260', pictrs: '' },
          { T: '60%', L: '50%', W: '240', H: '240', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 8) {
        let towpin = [
          { T: '0%', L: '0%', W: '120', H: '740', pictrs: '' },
          { T: '0%', L: '25%', W: '120', H: '740', pictrs: '' },
          { T: '0%', L: '50%', W: '120', H: '740', pictrs: '' },
          { T: '0%', L: '75%', W: '120', H: '740', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 9) {
        let towpin = [
          { T: '0%', L: '0', W: '525', H: '170', pictrs: '' },
          { T: '25%', L: '0%', W: '525', H: '170', pictrs: '' },
          { T: '50%', L: '0', W: '525', H: '170', pictrs: '' },
          { T: '75%', L: '0%', W: '525', H: '170', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 10) {
        let towpin = [
          { T: '12%', L: '0', W: '240', H: '260', pictrs: '' },
          { T: '12%', L: '50%', W: '240', H: '260', pictrs: '' },
          { T: '55%', L: '0', W: '240', H: '240', pictrs: '' },
          { T: '55%', L: '50%', W: '240', H: '240', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      } else if (e.currentTarget.dataset.current == 11) {
        let towpin = [
          { T: '0%', L: '0', W: '525', H: '300', pictrs: '' },
          { T: '45%', L: '50%', W: '240', H: '280', pictrs: '' },
          { T: '45%', L: '0', W: '240', H: '280', pictrs: '' },
          { T: '90%', L: '0', W: '525', H: '100', pictrs: '' }
        ];
        that.setData({
          towpin: towpin
        })
      }

    }
  },
  // 上传到服务器
  unloadfwq(src) {
    let that = this;
    // 上传到服务器
    var key = Math.random().toString(36).substr(2); //生成一个随机字符串的文件名
    let url = app.globalData.URL + 'common/upload'
    wx.uploadFile({
      url: url,
      filePath: src,
      header: {
        "Content-Type": "multipart/form-data",
        'accept': 'application/json',
        'Authorization': getApp().globalData.token //若有token，此处换上你的token，没有的话省略
      },
      name: 'file',
      formData: {
        'key': key //这里是为文件设置上传后的文件名
      },
      success: function (res) {
        console.log(res)
        let lvarr = JSON.parse(res.data)
        that.setData({
          lvarr: lvarr,
          livurl: lvarr.url,
          propic: lvarr.url,
        })
        console.log(lvarr, lvarr.url)
        let livurl = lvarr.url;
      },
      fail: function (res) { }
    })
  },
  // 去打印
  goorderimgpj() {
    let that = this;
    if (that.data.towpin[0].pictrs == '') {
      wx.showToast({
        title: '请先选择照片',
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.showLoading({
        title: '正在生成订单。。。',
      })
      // 将照片拼接
      const ctx = wx.createCanvasContext('shareCanvas1')
      // 图片生成
      let imgboxSW = that.data.imgboxSW;
      let imgboxSH = that.data.imgboxSH;
      let imgboxST = that.data.imgboxST;
      let imgboxSL = that.data.imgboxSL;
      let img1W = that.data.img1W;
      let img1H = that.data.img1H;
      let img1T = that.data.img1T;
      let img1L = that.data.img1L;
      let img2T = that.data.img2T;
      let img2W = that.data.img2W;
      let img2H = that.data.img2H;
      let img2L = that.data.img2L;
      let img3T = that.data.img3T;
      let img3L = that.data.img3L;
      let img3W = that.data.img3W;
      let img3H = that.data.img3H;
      let img4T = that.data.img4T;
      let img4L = that.data.img4L;
      let img4W = that.data.img4W;
      let img4H = that.data.img4H;
      let imgbl = that.data.imgbl / 4;//图片一缩放比例
      let imgbt = that.data.imgbt;//图片二缩放比例
      let imgct = that.data.imgct;//图片3缩放比例
      let imgdt = that.data.imgdt;//图片4缩放比例
      if (imgbl < imgbt) {
        imgbl = imgbt
      } else if (imgbl < imgct) {
        imgbl = imgct
      }

      let pic1 = that.data.towpin[0].pictrs;
      let pic2 = that.data.towpin[1].pictrs;


      ctx.fillRect(0, 0, ctx.width, ctx.height);
      console.log("图片1：", pic1, "图片2：", pic2)
      ctx.setFillStyle("#fff");
      console.log(img1L, imgboxSL)
      if (that.data.towselt >= 0 && that.data.towselt <= 3) {
        ctx.drawImage('../../../../images/picture/bgA4.png', 0, 0, imgboxSW * imgbl, imgboxSH * imgbl); //背景图
        ctx.drawImage(pic1, (img1L - imgboxSL) * imgbl, (img1T - imgboxST) * imgbl, img1W * imgbl, img1H * imgbl);
        ctx.drawImage(pic2, (img2L - imgboxSL) * imgbl, (img2T - imgboxST) * imgbl, img2W * imgbl, img2H * imgbl);
        console.log("第一张", pic1, (img1L - imgboxSL) * imgbl, (img1T - imgboxST) * imgbl, img1W * imgbl, img1H * imgbl, "第二张", pic2, (img2L - imgboxSL) * imgbl, (img2T - imgboxST) * imgbl, img2W * imgbl, img2H * imgbl)
        //  保存生成的图片并去打印
        ctx.draw(false, function () {
          setTimeout(function () {
            wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
              x: 0,
              y: 0,
              fileType: 'jpg',
              width: imgboxSW * imgbl,
              height: imgboxSH * imgbl,
              canvasId: 'shareCanvas1',
              success: function (res) {
                console.log(res.tempFilePath)
                wx.hideLoading();
                wx.navigateTo({
                  url: '/modelA/pages/drawings_printing/picplace_order/picplace_order?pics=' + res.tempFilePath + '&title=' + that.data.nvabarData.title + '&ccinfo=' + '10.2*15.2cm' + '&type=' + that.data.type + '&isColours=' + that.data.isColours + '&id=' + that.data.ids,
                })
              },
            })
          })
        })
      } else if (that.data.towselt > 3 && that.data.towselt <= 7) {
        let pic3 = that.data.towpin[2].pictrs;
        ctx.drawImage('../../../../images/picture/bgA4.png', 0, 0, imgboxSW * imgbl, imgboxSH * imgbl); //背景图
        ctx.drawImage(pic1, (img1L - imgboxSL) * imgbl, (img1T - imgboxST) * imgbl, img1W * imgbl, img1H * imgbl);
        ctx.drawImage(pic2, (img2L - imgboxSL) * imgbl, (img2T - imgboxST) * imgbl, img2W * imgbl, img2H * imgbl);
        ctx.drawImage(pic3, (img3L - imgboxSL) * imgbl, (img3T - imgboxST) * imgbl, img3W * imgbl, img3H * imgbl);
        //  保存生成的图片并去打印
        ctx.draw(false, function () {
          setTimeout(function () {
            wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
              x: 0,
              y: 0,
              width: imgboxSW * imgbl,
              height: imgboxSH * imgbl,
              canvasId: 'shareCanvas1',
              fileType: 'jpg',
              success: function (res) {
                console.log(res.tempFilePath)
                wx.hideLoading();
                wx.navigateTo({
                  url: '/modelA/pages/drawings_printing/picplace_order/picplace_order?pics=' + res.tempFilePath + '&title=' + that.data.nvabarData.title + '&ccinfo=' + '102mm*152mm' + '&type=' + that.data.type + '&isColours=' + that.data.isColours + '&id=' + that.data.ids,
                })
              },
            })
          })
        })
      } else if (that.data.towselt > 7 && that.data.towselt <= 11) {
        let pic3 = that.data.towpin[2].pictrs;
        let pic4 = that.data.towpin[3].pictrs;
        ctx.drawImage('../../../../images/picture/bgA4.png', 0, 0, imgboxSW * imgbl, imgboxSH * imgbl); //背景图
        ctx.drawImage(pic1, (img1L - imgboxSL) * imgbl, (img1T - imgboxST) * imgbl, img1W * imgbl, img1H * imgbl);
        ctx.drawImage(pic2, (img2L - imgboxSL) * imgbl, (img2T - imgboxST) * imgbl, img2W * imgbl, img2H * imgbl);
        ctx.drawImage(pic3, (img3L - imgboxSL) * imgbl, (img3T - imgboxST) * imgbl, img3W * imgbl, img3H * imgbl);
        ctx.drawImage(pic4, (img4L - imgboxSL) * imgbl, (img4T - imgboxST) * imgbl, img4W * imgbl, img4H * imgbl);
        //  保存生成的图片并去打印
        ctx.draw(false, function () {
          setTimeout(function () {
            wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
              x: 0,
              y: 0,
              width: imgboxSW * imgbl,
              height: imgboxSH * imgbl,
              canvasId: 'shareCanvas1',
              fileType: 'jpg',
              success: function (res) {
                console.log(res.tempFilePath)
                wx.hideLoading();
                wx.navigateTo({
                  url: '/modelA/pages/drawings_printing/picplace_order/picplace_order?pics=' + res.tempFilePath + '&title=' + that.data.nvabarData.title + '&ccinfo=' + '102mm*152mm' + '&type=' + that.data.type + '&isColours=' + that.data.isColours + '&id=10',
                })
              },
            })
          })
        })
      }


    }

  }
})